<!--
  * 工时功能
  *
  * @Author:    yjg
  * @Date:      2024-09-09 11:02:13
  * @Copyright  v1.0
-->
<template>
	<a-drawer title="加班预览" :open="visibleFlag" :width="900" :footerStyle="{ textAlign: 'right' }"
		:bodyStyle="{ padding: '8px 24px' }" @close="onClose" :maskClosable="false" :destroyOnClose="true"> 
		<a-form-item label="部门" name="departmentId">
			<DepartmentTreeSelect ref="departmentTreeSelect" width="100%" :init="false"
				v-model:value="form.departmentIds"/>
		</a-form-item>
		<a-row class="smart-query-form-row">
			<a-form-item label="加班日期" name="overtimeData">
			  <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="form.overtimeData" style="width: 100%" placeholder="加班日期" />
			</a-form-item>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<a-form-item label="打印日期" name="overtimeData">
			  <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="form.printData" style="width: 100%" placeholder="打印日期" @change="printHandle" />
			</a-form-item>
		</a-row>
		
		<a-form-item class="smart-query-form-item">
			<a-button type="primary" @click="queryData">
				<template #icon>
					<SearchOutlined />
				</template>
				查询
			</a-button>
		</a-form-item>
		<div style="display: flex;flex-wrap: wrap; justify-content:end;"><a-button type="link" @click="downloadPDF"
				danger><strong style="font-size: 20px;">下载</strong></a-button></div>

		<div class="all" id="pdf">
			<div>
				<div  style="float: left;height: 60px;width:260px;text-align:right;padding-top: 15px;padding-right:20px;">
					<img src="../../../../assets/images/logo/smart-admin-logo.png" width="50px" height="50px"/>
				</div>
				<div>
					<div style="text-align: left;">
						<div style="font-size: 30px;">鸿兴包装(无锡)有限公司</div>
						<div style="font-size: 28px;">&nbsp;&nbsp;&nbsp;&nbsp;员工自愿加班申请单</div>
					</div>
				</div>
			</div>
			<a-row class="smart-table-btn-block">
				<div class="smart-table-operate-block" style="font-size: 15px;margin-left: 10px;">
					部门:{{deptNames}}
				</div>
				<div class="smart-table-setting-block" style="font-size: 15px;margin-right: 10px;">
					加班时间：{{overtimeData}}
				</div>
			</a-row>
			<div class="table">
				<div class="table-row" style ="display: table-row;">
					<div class="table-cell" style="display: table-cell;border: 1px solid #000;color:#000;width:50px;text-align:center;vertical-align: middle;">序号</div>
					<div class="table-cell" style="display: table-cell;border: 1px solid #000;color:#000;width:50px;text-align:center;vertical-align: middle;">姓名</div>
					<div class="table-cell" style="display: table-cell;border: 1px solid #000;color:#000;width:60px;text-align:center;vertical-align: middle;">工号</div>
					<div class="table-cell" style="display: table-cell;border: 1px solid #000;color:#000;width:50px;text-align:center;vertical-align: middle;">班别</div>
					<div class="table-cell" style="display: table-cell;border: 1px solid #000;color:#000;width:100px;text-align:center;vertical-align: middle;">职务</div>
					<div class="table-cell" style="display: table-cell;border: 1px solid #000;color:#000;width:100px;text-align:center;vertical-align: middle;">申请时间</div>
					<div class="table-cell" style="display: table-cell;border: 1px solid #000;color:#000;width:50px;text-align:center;vertical-align: middle;">时数</div>
					<div class="table-cell" style="display: table-cell;border: 1px solid #000;color:#000;width:160px;text-align:center;vertical-align: middle;">申请原因</div>
					<div class="table-cell" style="display: table-cell;border: 1px solid #000;color:#000;width:40px;text-align:center;vertical-align: middle;">实际时数</div>
					<div class="table-cell" style="display: table-cell;border: 1px solid #000;color:#000;width:50px;text-align:center;vertical-align: middle;">本月累计时间</div>
					<div class="table-cell" style="display: table-cell;border: 1px solid #000;color: #000;text-align: center;vertical-align:middle;">本人签字</div>
				</div>
			</div>
			<div class="footer" style="display: flex;width:100%;height: 140px;">
				<div style="font-size:15px;font-family:500;width: 50%;">
					当日
					<div>
						<div style="float: left;margin-right:30px;">
							<div style="border: 1px solid #000;padding:5px;">班/组责任者</div>
							<div style="border-bottom: 1px solid #000;border-left: 1px solid #000;border-right: 1px solid #000;height: 40px;"></div>
							<div style="margin-top:10px;text-align:center;">(申请)</div>
						</div>
						
						<div style="float: left;margin-right:30px;">
							<div style="border: 1px solid #000;padding:5px;">部门责任者</div>
							<div style="border-bottom: 1px solid #000;border-left: 1px solid #000;border-right: 1px solid #000;height: 40px;"></div>
							<div style="margin-top:10px;text-align:center;">(批准)</div>
						</div>
						<div style="float: left;margin-right:30px;">
							<div style="border: 1px solid #000;padding:5px 20px;">总经办</div>
							<div style="border-bottom: 1px solid #000;border-left: 1px solid #000;border-right: 1px solid #000;height: 40px;"></div>
							<div style="margin-top:10px;text-align:center;">(批准)</div>
						</div>
					</div>
				</div>
				<div style="font-size:15px;font-family:500">
					次日
					<div>
						<div style="float: left;margin-right:30px;">
							<div style="border: 1px solid #000;padding:5px;">班/组责任者</div>
							<div style="border-bottom: 1px solid #000;border-left: 1px solid #000;border-right: 1px solid #000;height: 40px;"></div>
							<div style="margin-top:10px;text-align:center;">(实际时间记入)</div>
						</div>
						<div style="float: left;margin-right:30px;">
							<div style="border: 1px solid #000;padding:5px;">部门责任者</div>
							<div style="border-bottom: 1px solid #000;border-left: 1px solid #000;border-right: 1px solid #000;height: 40px;"></div>
							<div style="margin-top:10px;text-align:center;">(确认)</div>
						</div>
						<div style="float: left;">
							<div style="border: 1px solid #000;padding:5px 20px;">行政部</div>
							<div style="border-bottom: 1px solid #000;border-left: 1px solid #000;border-right: 1px solid #000;height: 40px;"></div>
							<div style="margin-top:10px;text-align:center;">(审核)</div>
						</div>
					</div>
				</div>
			</div>
			<div class="botton_print">
				打印日期：{{printData}}
			</div>
		</div>
	</a-drawer>
</template>
<script lang="ts" setup>
	import { reactive, ref,onMounted } from 'vue';
	import _ from 'lodash';
	import htmlToPdf from '/@/lib/htmlToPdf';
	import DepartmentTreeSelect from '/src/components/system/department-tree-select/department.vue';
	import { workingHoursApi } from '/@/api/business/working-hours/working-hours-api';
	import { smartSentry } from '/@/lib/smart-sentry';
    import { Solar } from 'lunar-javascript';
	import { message } from 'ant-design-vue';
  
    let solar = Solar.fromDate(new Date());
    let day = solar.toString();
	
	const printData = ref(day);
    const overtimeData = ref(day);
	const deptNameArr = ref([]);
	const deptNames = ref('');

    
	//-------------------------------pdf下载---------------------------------------------------

	const downloadPDF = () => {//可以用个按钮调用点击事件，需要获取整个最大的div的dom
		htmlToPdf.downloadPDF(document.querySelector('#pdf'), '工时打印');
	}
	// ------------------------ 事件 ------------------------
	const emits = defineEmits(['reloadList']);
	
	//---------------------------打印日期----------------------------------
	function printHandle(){
		printData.value = form.printData;
	}
	
	// ------------------------ 显示与隐藏 ------------------------
	// 是否显示
	const visibleFlag = ref(false);

	function show(rowData) {

		Object.assign(form, formDefault);
		if (rowData && !_.isEmpty(rowData)) {
			Object.assign(form, rowData);
		}
		visibleFlag.value = true;
	}

	function onClose() {
		Object.assign(form, formDefault);
		visibleFlag.value = false;
	}
	// ------------------------ 表单 ------------------------

	// 组件ref
	const formRef = ref();

	const formDefault = {
		//工时ID
		workingHoursId: undefined,
		departmentIds: undefined,
		overtimeData: undefined,
		overtimeFlag: 1,
		pageNum: 1,
		pageSize: 500,
		printData:undefined, 
	};

	let form = reactive({ ...formDefault });

	// 查询数据
	async function queryData() { 
		if(form.overtimeData == null){
			overtimeData.value = day;
		}else{
			overtimeData.value = form.overtimeData;
		}
		
		let Table = document.querySelector(".table")
		try {
			let queryResult = await workingHoursApi.selectPdfOverTime(form)
			Table.innerHTML = ""
			console.log("innerHTML:",Table)
			let str = ""
			deptNames.value = '';
			deptNameArr.value = [];
			str += "<div class='table-row' style ='display: table-row;'>"
			str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color:#000;width:50px;text-align:center;vertical-align: middle;'>序号</div>"
			str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:50px;vertical-align: middle;'>工号</div>"
			str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:60px;vertical-align: middle;'>姓名</div>"
			str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:50px;vertical-align: middle;'>班别</div>"
			str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:100px;vertical-align: middle;'>职务</div>"
			str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:100px;vertical-align: middle;'>申请时间</div>"
			str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:50px;vertical-align: middle;'>时数</div>"
			str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:160px;vertical-align: middle;'>申请原因</div>"
			str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:40px;vertical-align: middle;'>实际时数</div>"
			str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:50px;vertical-align: middle;'>本月累计时间</div>"
			str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align: center;vertical-align:middle;'>本人签字</div>"
			str += "</div>"
			let index = 1;
			for(let item of queryResult.data){
				deptNameArr.value.push(item.deptName);
				// if(index > 35){
				// 	document.getElementById('pdf').style.height= '2246px';
				// }
				str += "<div class='table-row' style ='display: table-row;'>"
				str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;width:50px;text-align:center;vertical-align:middle;padding:0px 5px;'>"+(index++)+"</div>"
				str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:50px;vertical-align:middle;padding:5px;'>"+item.jobNumber+"</div>"
				str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:60px;vertical-align:middle;padding:5px;'>"+item.name+"</div>"
				str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:50px;vertical-align:middle;padding:5px;'>"+item.banbieName+"</div>"
				str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:100px;vertical-align:middle;padding:5px;'>"+item.positionName+"</div>"
				str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:100px;vertical-align:middle;padding:5px;'>"+item.timeparams3+"</div>"
				str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:50px;vertical-align:middle;padding:5px;'>"+item.overtimeNum+"</div>"
				str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:160px;vertical-align:middle;padding:5px;'>"+item.overtimeResult+"</div>"
				str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:40px;vertical-align:middle;padding:5px;'>"+item.overtimeNum+"</div>"
				str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;width:50px;vertical-align:middle;padding:5px;'>"+item.totalNum+"</div>"
				str += "<div class='table-cell' style = 'display: table-cell;border: 1px solid #000;color: #000;text-align:center;vertical-align: middle;'></div>"		
				str += "</div>"
			}
			Table.innerHTML = str;
			deptNameArr.value = [...new Set(deptNameArr.value)];
			for(let i = 0 ; i < deptNameArr.value.length;i++){
				deptNames.value +=deptNameArr.value[i]+','
			}
			deptNames.value = deptNames.value.substring(0,deptNames.value.lastIndexOf(","))
		} catch (e) {
			smartSentry.captureError(e);
		} finally {

		}

	}

	onMounted(queryData);

	defineExpose({
		show,
	});
</script>


<style scoped>
	.all {
		width: 794px;
		height: 1123px;
		background-color: white;
		margin: 10px auto;
		overflow: auto;
		/* border: 1px solid #a5afbe; */
		float: right;
		position: relative;
	}
	.table {
		display: table;
		width: 100%;
		border-spacing: 0;
		border-collapse: collapse;
	}
	.footer{
		position: absolute;
		bottom: 0px;
	}
	.botton_print{
		position: absolute;
		bottom: 2px;
		width: 100%;
		text-align: right;
	}
</style>